<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>添加删除</title>
		<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>
		<script>
			$(function() {
				//在元素末尾追加,包含在当前元素中,成为子元素
				$("#md1").append("<p>这是一个新段落</p>");

				//元素头部追加,包含在当前元素中,成为子元素
				$("#md1").prepend("<p>这是一个新段落</p>");
				
				//在当前元素之前或者之后追加,和当前元素同级
				//$("#md1").before("<p>这是一个新段落</p>");
				//$("#md1").after("<p>这是一个新段落</p>");

				//动态给下拉菜单渲染选项
				var levels = ["A", "B", "C", "D"];
				for (var i = 0; i < levels.length; i++) {
					$("#scoreLevel").append("<option value=" + i + ">" + levels[i] + "</option>");
				}
				
				$("p").click(function(){
					//删除元素
					$(this).remove();
					
					//清空元素内容(内容或者子元素),元素本身还是在的
					//$(this).empty();
				});
			});
		</script>
	</head>
	<body>
		<div id="md1">
			<p>这是一个段落</p>
		</div>

		<div id="md2">
			<select id="scoreLevel">
				<option>--成绩等级--</option>
			</select>
		</div>
	</body>
</html>
